<template>
  <div>
    <home-header></home-header>
    <home-swiper :list="swiperList"></home-swiper>
    <home-icons :list="iconList"></home-icons>
    <home-recommend :list="recommendList"></home-recommend>
  </div>
</template>

<script>
import HomeHeader from './components/Header.vue'
import HomeSwiper from './components/Swiper.vue'
import HomeIcons from './components/Icons.vue'
import HomeRecommend from './components/Recommend.vue'
import axios from 'axios'
export default {
  name: 'Home',
  components: {
  	HomeHeader,
  	HomeSwiper,
    HomeIcons,
    HomeRecommend
  },
  data () {
    return {
      swiperList: [],
      iconList: [],
      recommendList: [],
      lastCity: ''
    }
  },
  mounted(){
    this.lastCity = this.$store.state.city
    this.getHomeInfo()
  },
  methods: {
    getHomeInfo(){
      axios.get('/api/index.json')
        .then(this.getHomeInfoSucc)
    },
    getHomeInfoSucc(res){
      res = res.data
      if(res.ret && res.data){
        const data = res.data
        this.swiperList = data.swiperList
        this.iconList = data.iconList
        this.recommendList = data.recommendList
      }
    }
  },
  // activated生命周期函数只有keep-alive组件激活时调用，服务器端渲染期间不调用
  activated () {
    // 切换不同城市时，重新请求首页接口
    if(this.lastCity !== this.$store.state.city){
      this.lastCity = this.$store.state.city
      this.getHomeInfo()
    }
  }  
}
</script>

<style scoped>

</style>
